<template>
  <div class="message-item row q-my-sm q-gutter-x-sm">
    <div class="left">
      <template v-if="message.type == 7">
        <div class="fit q-pa-xs">
          <q-img class="fit" :src="getComplimentImage()" />
        </div>
      </template>
      <template v-else-if="message.type == 5">
        <div class="fit q-pa-xs">
          <q-img class="fit" src="/images/thumb-up.png"></q-img>
        </div>
      </template>
      <template v-else-if="message.type == 6">
        <div class="fit q-pa-xs">
          <q-img class="fit" src="/images/thumb-down.png"></q-img>
        </div>
      </template>
      <template v-else>
        <div class="fit row justify-center items-center q-pa-sm">
          <q-avatar class="fit">
            <q-img :src="message.userAvatar" />
          </q-avatar>
        </div>
      </template>
    </div>
    <div class="middle col column no-wrap justify-between">
      <div class="upper two-line-text">{{ message.content }}</div>
      <div class="lower">{{ message.timeString }}</div>
    </div>
    <div class="right">
      <template v-if="message.type === 3">
        <div class="fit row items-center justify-center">
          <q-btn
            rounded
            outline
            label="Follow"
            size="sm"
            no-caps
            padding="5px 8px"
          />
        </div>
      </template>
      <template v-else>
        <div class="fit">
          <q-img :ratio="16 / 9" :src="message.coverImage" />
        </div>
      </template>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, PropType, onMounted, computed } from 'vue';
import Message from 'src/models/Message';
import ComplimentConfig from 'src/models/ComplimentConfig';
import Avatar from '../Avatar.vue';
import { useGlobalStore } from 'stores/global-store';
const globalStore = useGlobalStore();
const compliments = computed<ComplimentConfig[]>(
  () => globalStore.complimentConfig
);
const props = defineProps({
  message: {
    type: Object as PropType<Message>,
    required: true,
  },
});
function getComplimentImage(): string | undefined {
  return compliments.value.find(
    (comp) => comp.id === props.message.complimentId
  )?.normalImage;
}
function createContent(): string {
  let str = '';
  switch (props.message.type) {
    case 1:
      {
        // NEW VIDEO
        str = `${props.message.userName} uploaded ${props.message.videoTitle}`;
      }
      break;
    case 2:
      {
      }
      break;
    case 3:
      {
      }
      break;
    case 4:
      {
      }
      break;
    case 5:
      {
      }
      break;
    case 6: {
    }
  }
  return str;
}
</script>
<style lang="scss" scoped>
.message-item {
  width: 100%;
  height: 60px;
  .left {
    width: 60px;
    height: 100%;
  }
  .middle {
    height: 100%;
    .upper {
      font-size: 14px;
    }
    .lower {
      font-size: 12px;
      color: $sub;
    }
  }
  .right {
    min-width: 60px;
    height: 100%;
  }
}
</style>
